<template>
  <!-- 轮播图组件 -->
  <div class="slide">
    <div v-swiper:mySwiper="swiperOption" class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(item, i) in img" :key="i">
          <a href="javascript:;">
            <img :src="item.icon" alt="轮播图图片">
          </a>
        </li>
      </ul>
      <!-- 小圆点 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
export default {
    props: [
      'img'
    ],
    data () {
        return {
          swiperOption: {
            loop: true,
            autoplay: true,
            pagination: {
              el: '.swiper-pagination'
            }
          }
        }
    },
}
</script>

<style lang="scss" scoped>
.slide {
  width: 100%;
  height: 4.38rem;
  ul {
    padding: 0;
    a {
      display: inline-block;
      height: 100%;
      img {
        // object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
  // 轮播图
  .swiper-container {
    height: 100%;
    // ul
    .swiper-wrapper {
      // li
      .swiper-slide {
        a {
          display: inline-block;
          width: 100%;
        }
      }
    }
    // 小圆点
    .swiper-pagination{
      width: 2.5rem;
      bottom: 10px;
      left: 80%;
      height: .5rem;
      line-height: 0px;
      letter-spacing: 12px;
      --swiper-pagination-color: #4b67af;
    }
  }
}
</style>